<template>
  <section class="tarbar-body">
    <div class="bk-btn">
      <a class="prev-btn" @click="prevItem"></a>
      <ul class="category">
        <li class="category-item" v-for="(item, index) in menuList" :class="[getClass(index), { 'active': index === activeIndex }]" :key="item.id" @click="selectItem(item,index)">
          <img :src="item.status ? item.imgSelected : item.img">
          <a>{{ item.title }}</a>
        </li>
      </ul>
      <a class="next-btn" @click="nextItem"></a>
    </div>
  </section>
</template>

<script setup lang="ts" name="tarBar">

import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {treeConstruct} from "./Construct.ts";
import emitter from "../../utils/emitter.ts";
import { ElMessage } from 'element-plus';

const proxy = getCurrentInstance()
const data = structuredClone(treeConstruct)
const menuList = ref(data[0].children);

/*const menuList = reactive([
  {
    name: '标签管理',
    img: getAssetsFile('imgs/tag-b.png'),
    imgSelected: getAssetsFile('imgs/tag-y.png'),
    status: true,
    id: 1
  },
  {
    name: '层级分布',
    img: getAssetsFile('imgs/level-b.png'),
    imgSelected: getAssetsFile('imgs/level-y.png'),
    status: false,
    id: 2
  },
  {
    name: '实景VR',
    img: getAssetsFile('imgs/vr-b.png'),
    imgSelected: getAssetsFile('imgs/vr-y.png'),
    status: false,
    id: 3
  },
  {
    name: '下放管理',
    img: getAssetsFile('imgs/other-b.png'),
    imgSelected: getAssetsFile('imgs/other-y.png'),
    status: false,
    id: 4
  },
  {
    name: '安全管理',
    img: getAssetsFile('imgs/security-b.png'),
    imgSelected: getAssetsFile('imgs/security-y.png'),
    status: false,
    id: 5
  },
  {
    name: '点位管理',
    img: getAssetsFile('imgs/point-b.png'),
    imgSelected: getAssetsFile('imgs/point-y.png'),
    status: false,
    id: 6
  },
  {
    name: '在线监控',
    img: getAssetsFile('imgs/video-b.png'),
    imgSelected: getAssetsFile('imgs/video-y.png'),
    status: false,
    id: 7
  },
  {
    name: '测试测试',
    img: getAssetsFile('imgs/video-b.png'),
    imgSelected: getAssetsFile('imgs/video-y.png'),
    status: false,
    id: 8
  },
])*/

const getClass = (index) => {
  return 'active' + index;
}

const activeIndex = ref(0);
const prevItem = () => {
  // menuList.value.unshift(menuList.value[menuList.value.length -1]);
  // menuList.value.pop();
  const lastItem = menuList.value.pop(); // 弹出最后一个元素
  menuList.value.unshift(lastItem); // 放到数组的开头
};

const nextItem = () => {
  // menuList.value.push(menuList.value[0])
  // menuList.value.shift();
  const firstItem = menuList.value.shift(); // 移除数组的第一个元素
  menuList.value.push(firstItem); // 放到数组的末尾
};
const emits = defineEmits(['barClick'])
const selectItem = (data, index) => {

  // 根据url判断是否可以切换选项卡
  if (data.url) {
    activeIndex.value = index
    menuList.value.forEach(item => {
      if (item.id == data.id) {
        item.status = true
      } else {
        item.status = false
      }
    })
    emits('barClick', {
      title: data.title,
      key: data.key,
      componentName: data.componentName,
      url: data.url
    })
  } else {
    ElMessage({
      message: '功能研发中，敬请期待',
      type: 'info'
    });
  }
}

// 切换显示不同模块的二级菜单
emitter.on('on-switch-bar', (index: number) => {

  const list = structuredClone(treeConstruct)
  menuList.value = list[index].children

  if (!menuList.value[0].url) {
    activeIndex.value = null
  } else {
    activeIndex.value = 0
    menuList.value[0].status = true
  }

  emits('barClick', {
    title: menuList.value[0].title,
    key: menuList.value[0].key,
    componentName: menuList.value[0].componentName,
    url: menuList.value[0].url,
  })

  if (list[index]?.path) {
    // todo: 先删除老的再加载新的
    emits('loadModels', {
      url: list[index]?.path,
      property: list[index]?.property,
      newPosition: list[index]?.newPosition
    })
  }

});

onMounted(() => {

})
</script>

<style scoped lang="scss">
.tarbar-body {
  height: 100%;
  width: 20%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  color: #ffffff;
  display: flex;
  align-items: center;

  .bk-btn {
    width: 124px;
    height: 802px;
    background: url('@/assets/imgs/wheel2.png') no-repeat center;
    background-size: contain;
    position: relative;

    .category {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-left: 50px;
      margin-top: 60px;
      width: 250px;
      height: 680px;
      overflow: hidden;
    }

    .category-item {
      margin: 5px 0;
      font-size: 17px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
      position: relative;
      font-family: fangzheng;
      color: #ffffff;
      transition: transform 0.5s ease; // 添加过渡效果

      img {
        width: 76px;
        height: 76px;
      }
      a {
        display: block;
        margin-top: -14px;
        background: linear-gradient(#FFFFFF 50% , #0077F5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .active {

      a {
        background: linear-gradient(#FFFFFF 50% , #FED043 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .active0 {
      margin-left: -110px;
    }
    .active1 {
      margin-left: -30px;
    }
    .active2 {
      margin-left: 10px;
    }
    .active3 {
      margin-left: 30px;
    }
    .active4 {
      margin-left: 10px;
    }
    .active5 {
      margin-left: -30px;
    }
    .active6 {
      margin-left: -110px;
    }
  }
}

.prev-btn,
.next-btn {
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.prev-btn {
  background: url("@/assets/imgs/prev.png") no-repeat center;
  background-size: 100%;
  left: 26px;
  top: 120px;
  transform: rotate(-10deg);
}

.next-btn {
  background: url("@/assets/imgs/next.png") no-repeat center;
  background-size: 100%;
  left: 26px;
  bottom: 120px;
  transform: rotate(10deg);
}
</style>
